<template>
    <div class="drill">
        <div class="breand">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">网安实验</el-breadcrumb-item>
                <el-breadcrumb-item>安全实验</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="drill-content">
            <!-- 左边内容 -->
            <div class="content-left">
                <!-- 分类 -->
                <div class="classify" :style="styleObiject">
                    <div class="classify-box">
                        <span>分类：</span>
                    </div>
                    <div class="classify-item">
                        <span :class="{ active: classifyId == item.id }" v-for="item in classifyData" :key="item.id"
                            @click="clickClassift(item.id)">{{ item.name }}</span>

                    </div>
                </div>
                <button class="classify-btn" v-if="upState == 'more'" @click="changeDown('more')">
                    更多
                    <el-icon>
                        <ArrowDown />
                    </el-icon>
                </button>
                <button class="classify-btn" v-else @click="changeDown('packup')">
                    收起
                    <el-icon>
                        <ArrowUp />
                    </el-icon>
                </button>

                <!-- 排序 -->
                <div class="sort">

                    <div class="sort-item">
                        排序：
                        <span @click="clickSort(1)" :class="{ active: sortord == 1 }">最新</span>
                        <span @click="clickSort(2)" :class="{ active: sortord == 2 }">最热</span>
                    </div>
                    <!-- 价格 -->
                    <div class="sort-item1">
                        价格：
                        <el-dropdown @command="handleCommand">
                            <span class="el-dropdown-link">
                                {{ price }}
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="默认   ">默认</el-dropdown-item>
                                    <el-dropdown-item command="由高到低">由高到低</el-dropdown-item>
                                    <el-dropdown-item command="由低到高">由低到高</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <!-- 难度 -->
                    <div class="sort-item2">
                        难度：
                        <el-dropdown @command="handleDifficulty">
                            <span class="el-dropdown-link">
                                {{ difficulty }}
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu v-for="item in degreeData" :key="item.id">
                                    <el-dropdown-item :command="item">{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                    <div class="sort-item3">
                        <el-switch v-model="value1" />
                        仅看VIP观享
                    </div>
                </div>

                <!-- 内容区域 -->
                <div class="container">
                    <!-- 渲染两种情况 -->
                    <div class="content-main">
                        <div class="content-main-son" v-for="item in data.rangeData" :key="item.id" @click="jumpRnagesDetail(item.id)">
                            <div class="content-main-img">
                                <img :src=" item.image" alt="">
                            </div>
                            <div class="content-main-text" :class="{ shadow: myShadow == 0 }">
                                {{ item.name }}
                                <div class="content-main-text-bottom">
                                    <div class="content-main-text-bottom-1">
                                        恶意代码
                                        <img src="./../assets/imgs/icon_zuijiandan.png" alt="">
                                    </div>
                                    <div class="content-main-text-bottom-2">
                                        {{ item.pnum }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- 右边内容 -->
            <div class="content-right">
                <Rankings></Rankings>
            </div>
        </div>

        <div class="paging">
            <div class="demo-pagination-block">
                <el-pagination v-model:page-size="params.size"  layout=" prev, pager, next, jumper" :total="data.total" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>



<script lang='ts' setup>

import { ArrowRight } from '@element-plus/icons-vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Rankings from '../../component/Rankings.vue'
import { pageByAllApi } from '../../api/range.js'
import { allRangesClassApi, findRangesbyTypeApi, finddegreeApi } from '../../api/range.js'

// 内容列表
interface RangeData {
    id: number;//id
    name: string;//昵称
    image: string;//靶场图片
    pnum: string;//人数
}
const router =useRouter()
const data = reactive<{
    rangeData: RangeData[],
    total:number | null
}>({
    rangeData: [],
    total:0
})
const myShadow = ref<number>(0);

// 下拉框
const price = ref("默认")
const difficulty = ref("初级")

// 安全实验传int类型：1，CTF传int类型：2，
const state = 1
// 分类数据
const classifyData = ref([])
const degreeData =ref([])
// 分类点击状态

const classifyId = ref(null)
const degreeId = ref(null)
const sortord = ref(null)

// 展开更多效果
const upState = ref('more')

// 分页
const params = {
    pageNum: 1,
    size: 3
}

onMounted(() => {
    //发送接口，初始化数据
    getData();
    findData();

})

function getData() {
    // 分页查询所有靶场接口
    pageByAllApi(params)
        .then((res: any) => {
            data.rangeData = res.data.data.data
            console.log(res);
            data.total=res.data.data.total
        })

}

function findData() {
    // 查询所有靶场分类的接口
    allRangesClassApi(state)
        .then((res: { data: { data: never[] } }) => {
            classifyData.value = res.data.data
            console.log(classifyData.value);
    })
    // 查询难度接口
    finddegreeApi()
    .then((res: { data: { data: never[] } })=>{
        console.log(res);
        degreeData.value = res.data.data
        
    })
}

function findRangesbyType() {
    const datas ={
        classifyId:classifyId.value,
        degreeId:degreeId.value,
        sortord:sortord.value,
        pageNum:params.pageNum
    }
    // console.log(datas);
    
    findRangesbyTypeApi(datas)
    .then((res: { data: { data: { data: { id: number; name: string; image: string; pnum: string }[] } } })=>{
        // console.log(res);

        data.rangeData =res.data.data.data
    })
}



// 分页
const handleCurrentChange = (val: number) => {
    params.pageNum = val
    getData()
}



const styleObiject = reactive({
    height: "50px",
    overflow: "hidden"
})

// 下拉展开全部
function changeDown(val: string) {
    if (styleObiject.height == "50px") {
        styleObiject.height = "120px"
        upState.value = 'packup'
    } else {
        styleObiject.height = "50px"
        upState.value = 'more'
    }
}

// 分类点击状态
function clickClassift(id: any) {
    classifyId.value = id
    // console.log(id);
    findRangesbyType()
}

// 排序
function clickSort(val:any) {
    // console.log(val);
    sortord.value = val
    findRangesbyType()

}
// 价格
const handleCommand = (command: string) => {
    // console.log("价格", command);
    price.value = command
    findRangesbyType()
}

// 难度
const handleDifficulty = (command:any) => {
    // console.log("难度", command);
    difficulty.value = command.name
    degreeId.value = command.id
    findRangesbyType()

}

const jumpRnagesDetail =(id:any)=>{
    router.push({path:'/shoot',params:id})
}



// 开关
const value1 = ref(false)

</script>



<style scoped lang=scss>
.active {
    color: #139DFF;

}

.drill {
    margin: 0 auto;
    padding: 0 1.5625rem;
    max-width: 24rem;
    box-sizing: border-box;
}

.el-breadcrumb {
    font-size: 0.25rem;
}

// 下拉框
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
    border: none;

}

.el-dropdown-link:focus {
    outline: none;
}

.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-pagination {
    justify-content: center;
    margin-top: 0.88rem;
    margin-bottom: 0.88rem;
    height: 0.5rem;
}


.drill-content {
    display: flex;

    .content-left {

        margin-top: 0.15rem;
        width: 16.63rem;

        position: relative;
    }

    .classify {
        box-sizing: border-box;
        padding: 0.25rem;
        background-color: rgba(247, 248, 250, 1);
        border-radius: 0.15rem;
        width: 15.04rem;
        // height: 1.5rem;
        border: 0.02rem solid rgba(232, 232, 233, 1);
        display: flex;


        .classify-box {
            display: block;
            width: 1rem;
            font-size: 0.25rem;
        }

        .classify-item {
            // border: 0.01rem solid skyblue;
            width: 11.25rem;
            // height: 0.63rem;
            margin-left: 0.1rem;
            display: grid;
            grid-template-columns: repeat(auto-fill, 1.55rem);

            span {
                display: block;
                // width: 1.7rem;
                font-size: 0.25rem;
                margin-bottom: 0.25rem;
            }

            .active {
                color: #139DFF;
            }
        }



    }

    .classify-btn {
        width: 1rem;
        height: 0.3rem;
        margin: 0.1rem 0 0 0.65rem;
        border: 0.01rem solid rgba(232, 232, 233, 1);
        position: absolute;
        top: 0.2rem;
        right: 1.83rem;
        font-size: 0.22rem;
        border-radius: 0.03rem;
    }

    .sort {
        margin-top: 0.4rem;
        border-radius: 0.15rem;
        width: 15.04rem;
        height: 1.09rem;
        border: 0.02rem solid rgba(232, 232, 233, 1);
        padding: 0.35rem;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        font-size: 0.26rem;
        margin-bottom: 0.65rem;

        .sort-item {
            height: 0.25rem;
            width: 2.85rem;

            span {
                margin-right: 0.35rem;
            }
        }

        .sort-item1 {
            margin-left: 0.15rem;
            width: 2.75rem;
        }

        .sort-item2 {
            margin-left: 0.35rem;
            width: 2.2rem;
        }

        .sort-item3 {
            margin-left: 3.25rem;
        }

        .el-switch {
            height: 0rem;
        }


    }

    .content-right {
        margin-top: 0.13rem;
    }


}

// 靶场内容区域
html,
body {
    padding: 0;
    margin: 0;
}

.container {
    padding-right: 0.75rem;
    // padding-left: 0.45rem;
    box-sizing: border-box;
    // margin-top: 0.65rem;
}

.tab-header {
    height: 1.125rem;
    display: flex;
    justify-content: center;
    align-items: center;

    .tab-header-son {
        width: 20%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .tab-header-son-1,
        .tab-header-son-2 {
            width: 50%;
            height: 100%;
            line-height: 1.125rem;
            text-align: center;
            font-size: 0.25rem;
        }

        .tab-header-son-1 {
            color: #7f7f7f;
            font-weight: bold;
            position: relative;

            .fix {
                width: 0.325rem;
                height: 0.325rem;
                border-bottom: 0.0625rem solid #139dff;
                position: absolute;
                bottom: -0.0375rem;
                left: 0.95rem;
            }

        }

        .tab2 {
            color: #222222;
            font-weight: bold;
        }
    }
}


.content-main {
    display: grid;
    width: 104%;
    grid-template-columns: repeat(3, minMax(0, 1fr));

    gap: 10px;

    .content-main-son {
        // width: 5rem;
        height: 4.25rem;
        margin-bottom: 0.275rem;

        border-radius: 0.125rem;
        border: 0.0125rem solid rgb(206, 204, 204);

        .content-main-img {
            width: 100%;
            height: 70%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .content-main-text {
            width: 100%;
            height: 30%;
            padding: 0.1rem;
            box-sizing: border-box;
            font-size: 0.1875rem;
            font-weight: bold;

            .content-main-text-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 0.375rem;
                font-size: 0.125rem;
                color: #d8d8d8;
                margin-top: 0.125rem;

                .content-main-text-bottom-1 {
                    display: flex;
                    align-items: center;

                    img {
                        margin-left: 0.1rem;
                    }
                }
            }
        }

    }
}


.shadow {
    box-shadow: 0.0375rem 0.0375rem 0.125rem 0.025rem #eeecec, -0.0375rem -0.0375rem 0.125rem 0.025rem #eeecec;
}

.paging {

    margin-bottom: 0.88rem;

    height: 1.5rem;
}
</style>